import React from 'react';
import algoliasearch from 'algoliasearch/lite';
import {
  Configure,
  {{#if flags.dynamicWidgets}}
  DynamicWidgets,
  {{#unless attributesForFaceting}}
  RefinementList,
  {{/unless}}
  {{/if}}
  {{#if attributesToDisplay}}
  Highlight,
  {{/if}}
  Hits,
  InstantSearch,
  Pagination,
  {{#if attributesForFaceting}}
  RefinementList,
  {{/if}}
  SearchBox,
} from 'react-instantsearch';

import { Panel } from './Panel';

import type { Hit } from 'instantsearch.js';

import './App.css';

const searchClient = algoliasearch(
  '{{appId}}',
  '{{apiKey}}'
);

const future = { preserveSharedStateOnUnmount: true };

export function App() {
  return (
    <div>
      <header className="header">
        <h1 className="header-title">
          <a href="/">{{name}}</a>
        </h1>
        <p className="header-subtitle">
          using{' '}
          <a href="https://github.com/algolia/instantsearch/tree/master/packages/react-instantsearch">
            React InstantSearch
          </a>
        </p>
      </header>

      <div className="container">
        <InstantSearch searchClient={searchClient} indexName="{{indexName}}" future={future} {{#if flags.insights}}insights{{/if}}>
          <Configure hitsPerPage={8} />
          <div className="search-panel">
            <div className="search-panel__filters">
              {{#if flags.dynamicWidgets}}
              <DynamicWidgets fallbackComponent={RefinementList}>
                {{#each attributesForFaceting}}
                <Panel header="{{this}}">
                  <RefinementList attribute="{{this}}" />
                </Panel>
                {{/each}}
              </DynamicWidgets>
              {{else}}
              {{#each attributesForFaceting}}
              <Panel header="{{this}}">
                <RefinementList attribute="{{this}}" />
              </Panel>
              {{/each}}
              {{/if}}
            </div>

            <div className="search-panel__results">
              <SearchBox placeholder="{{searchPlaceholder}}" className="searchbox" />
              <Hits hitComponent={Hit} />

              <div className="pagination">
                <Pagination />
              </div>
            </div>
          </div>
        </InstantSearch>
      </div>
    </div>
  );
}

type HitProps = {
  hit: Hit;
};

function Hit({ hit }: HitProps) {
  return (
    <article>
      {{#if attributesToDisplay}}
      {{#if imageAttribute}}
      <img src={ hit.{{imageAttribute}} } alt={ hit.{{attributesToDisplay.[0]}} } />
      {{/if}}
      <div>
        <h1>
          <Highlight attribute="{{attributesToDisplay.[0]}}" hit={hit} />
        </h1>
        {{#each attributesToDisplay}}
        {{#unless @first}}
        <p>
          <Highlight attribute="{{this}}" hit={hit} />
        </p>
        {{/unless}}
        {{/each}}
      </div>
      {{else}}
      <p>
        <code>{JSON.stringify(hit).slice(0, 100)}...</code>
      </p>
      {{/if}}
    </article>
  );
}
